Web Worker 与多线程优化

Web Worker 在独立线程执行计算密集任务，不阻塞 UI 渲染。

Vite Worker 支持

JavaScript

// 使用 ?worker 后缀导入
import Worker from './heavy-calc.js?worker'

// 创建 Worker 实例
const worker = new Worker()

// 发送消息
worker.postMessage({ data: input })

// 接收结果
worker.onmessage = (e) => {
  console.log('Result:', e.data)
}

Worker 内联创建

JavaScript

// 内联 Worker 代码
import InlineWorker from './worker?worker&inline'

// inline Worker 不生成独立文件
// 代码内联到主 chunk

Worker 文件示例

JavaScript

// heavy-calc.js
self.onmessage = (e) => {
  const { data } = e

  // 执行复杂计算
  const result = heavyCalculation(data)

  // 返回结果
  self.postMessage(result)
}

function heavyCalculation(data) {
  // 大量计算...
  return result
}

注意：Worker 代码不能访问 DOM，只能通过消息通信。

Worker 类型

类型	说明	适用场景
?worker	独立文件 Worker	大型计算任务
?worker&inline	内联 Worker	小型任务
?sharedworker	SharedWorker	多标签页共享

SharedWorker

JavaScript

// SharedWorker 多标签页共享
import SharedWorker from './shared.js?sharedworker'

const worker = new SharedWorker()
worker.port.onmessage = (e) => {
  console.log('Shared:', e.data)
}

使用场景

场景	Worker	效果
大数据处理	✓	不阻塞 UI
复杂计算	✓	多线程并行
图片处理	✓	后台处理
音视频编码	✓	实时处理

性能对比

方式	UI 阻塞	处理时间
主线程计算	✓ 阻塞	同步
Worker 计算	✗ 不阻塞	异步

Worker 销毁

JavaScript

// 任务完成后销毁
worker.onmessage = (e) => {
  console.log(e.data)
  worker.terminate()  # 销毁 Worker
}

要点总结

?worker 导入创建 Worker
Worker 在独立线程执行计算
不能访问 DOM，通过消息通信
sharedworker 多标签页共享